<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
  </head>
  <body>
    <div id="app">
      <div class="view view-main view-init">
        <div class="page">
          <div class="navbar">
            <div class="navbar-inner">
              <div class="left"></div>
              <div class="title">Stepper</div>
              <div class="right"></div>
            </div>
          </div>
          <div class="page-content"><div class="block-title">Shape and size</div>
<div class="block block-strong text-align-center">
<div class="row">
<div class="col">
<small>Default</small>
<div class="stepper stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<small>Round</small>
<div class="stepper stepper-round stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
<div class="row margin-top">
<div class="col">
<small>Fill</small>
<div class="stepper stepper-fill stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<small>Round Fill</small>
<div class="stepper stepper-fill stepper-round stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
<div class="row margin-top">
<div class="col">
<small>Small</small>
<div class="stepper stepper-small stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<small>Small Round</small>
<div class="stepper stepper-small stepper-round stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
<div class="row margin-top">
<div class="col">
<small>Small Fill</small>
<div class="stepper stepper-small stepper-fill stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<small>Small Round Fill</small>
<div class="stepper stepper-small stepper-round stepper-fill stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
<div class="row margin-top">
<div class="col">
<small>Big</small>
<div class="stepper stepper-big stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<small>Big Round</small>
<div class="stepper stepper-big stepper-round stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
<div class="row margin-top">
<div class="col">
<small>Big Fill</small>
<div class="stepper stepper-big stepper-fill stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<small>Big Round Fill</small>
<div class="stepper stepper-big stepper-round stepper-fill stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
</div>
<div class="block-title">Raised (MD-theme only)</div>
<div class="block block-strong text-align-center">
<div class="row">
<div class="col">
<small>Default</small>
<div class="stepper stepper-raised stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<small>Round</small>
<div class="stepper stepper-raised stepper-round stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
<div class="row margin-top">
<div class="col">
<small>Fill</small>
<div class="stepper stepper-raised stepper-fill stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<small>Round Fill</small>
<div class="stepper stepper-raised stepper-fill stepper-round stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
<div class="row margin-top">
<div class="col">
<small>Small</small>
<div class="stepper stepper-raised stepper-small stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<small>Small Round</small>
<div class="stepper stepper-raised stepper-small stepper-round stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
<div class="row margin-top">
<div class="col">
<small>Small Fill</small>
<div class="stepper stepper-raised stepper-small stepper-fill stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<small>Small Round Fill</small>
<div class="stepper stepper-raised stepper-small stepper-round stepper-fill stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
<div class="row margin-top">
<div class="col">
<small>Big</small>
<div class="stepper stepper-raised stepper-big stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<small>Big Round</small>
<div class="stepper stepper-raised stepper-big stepper-round stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
<div class="row margin-top">
<div class="col">
<small>Big Fill</small>
<div class="stepper stepper-raised stepper-big stepper-fill stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<small>Big Round Fill</small>
<div class="stepper stepper-raised stepper-big stepper-round stepper-fill stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
</div>
<div class="block-title">Colors</div>
<div class="block block-strong text-align-center">
<div class="row">
<div class="col">
<div class="stepper stepper-init stepper-fill color-red">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<div class="stepper stepper-round stepper-fill stepper-init color-green">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
<div class="row margin-top">
<div class="col">
<div class="stepper stepper-fill stepper-init color-blue">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<div class="stepper stepper-fill stepper-round stepper-init color-pink">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
<div class="row margin-top">
<div class="col">
<div class="stepper stepper-small stepper-fill stepper-init color-yellow">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<div class="stepper stepper-small stepper-fill stepper-round stepper-init color-orange">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
<div class="row margin-top">
<div class="col">
<div class="stepper stepper-small stepper-fill stepper-init color-gray">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<div class="stepper stepper-small stepper-round stepper-fill stepper-init color-black">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
</div>
<div class="block-title">Without input element</div>
<div class="block block-strong text-align-center">
<div class="row">
<div class="col">
<div class="stepper stepper-init" data-value="0" data-min="0" data-max="100" data-step="1">
<div class="stepper-button-minus"></div>
<div class="stepper-value"></div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<div class="stepper stepper-round stepper-init" data-value="0" data-min="0" data-max="100" data-step="1">
<div class="stepper-button-minus"></div>
<div class="stepper-value"></div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
</div>
<div class="block-title">Min, max, step</div>
<div class="block block-strong text-align-center">
<div class="row">
<div class="col">
<div class="stepper stepper-fill stepper-init">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="100" min="0" max="1000" step="100" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<div class="stepper stepper-fill stepper-round stepper-init" data-value="5" data-min="0" data-max="10" data-step="0.5">
<div class="stepper-button-minus"></div>
<div class="stepper-value"></div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
</div>
<div class="block-title">Autorepeat (Tap & hold)</div>
<div class="block-header">Pressing and holding one of its buttons increments or decrements the stepper’s value repeatedly. With dynamic autorepeat, the rate of change depends on how long the user continues pressing the control.</div>
<div class="block block-strong text-align-center">
<div class="row">
<div class="col">
<small>Default</small>
<div class="stepper stepper-fill stepper-init" data-autorepeat="true">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
<div class="col">
<small>Dynamic</small>
<div class="stepper stepper-fill stepper-init" data-autorepeat="true" data-autorepeat-dynamic="true">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="100" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
</div>
<div class="block-title">Wraps</div>
<div class="block-header">In wraps mode incrementing beyond maximum value sets value to minimum value, likewise, decrementing below minimum value sets value to maximum value</div>
<div class="block block-strong text-align-center">
<div class="row">
<div class="col">
<div class="stepper stepper-fill stepper-init" data-wraps="true" data-autorepeat="true" data-autorepeat-dynamic="true">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="10" step="1" readonly>
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
</div>
<div class="block-title">Custom value element</div>
<div class="list">
<ul>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Apples: <span id="apples-count"></span></div>
<div class="item-after">
<div class="stepper stepper-init stepper-small stepper-raised" data-value-el="#apples-count">
<div class="stepper-button-minus"></div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-inner">
<div class="item-title">Oranges: <span id="oranges-count"></span></div>
<div class="item-after">
<div class="stepper stepper-init stepper-small stepper-raised" data-value-el="#oranges-count">
<div class="stepper-button-minus"></div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="block-title">Custom value format</div>
<div class="list">
<ul>
<li class="item-content">
<div class="item-inner">
<div class="item-title">
<div class="item-header">Meeting starts in</div>
<span id="meeting-start-time"></span>
</div>
<div class="item-after">
<div class="stepper stepper-fill stepper-small stepper-raised" id="stepper-time">
<div class="stepper-button-minus"></div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="block-title">Manual input</div>
<div class="block-header">It is possible to enter value manually from keyboard or mobile keypad. When click on input field, stepper enter into manual input mode, which allow type value from keyboar and check fractional part with defined accurancy. Click outside or enter Return key, ending manual mode.</div>
<div class="block block-strong text-align-center">
<div class="row">
<div class="col">
<div class="stepper stepper-fill stepper-init" data-wraps="true" data-autorepeat="true" data-autorepeat-dynamic="true" data-decimal-point="2" data-manual-input-mode="true">
<div class="stepper-button-minus"></div>
<div class="stepper-input-wrap">
<input type="text" value="0" min="0" max="1000" step="1">
</div>
<div class="stepper-button-plus"></div>
</div>
</div>
</div>
</div>
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript" src="../../packages/core/js/framework7.min.js"></script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      var plugin = {
        params: {
          theme: theme,
          root: '#app',
        }
      };
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
    </script>
    <script>
      var app = new Framework7();
      
      var stepperTime = app.stepper.create({
        el: '#stepper-time',
        valueEl: '#meeting-start-time',
        min: 15, // 15 minutes min
        max: 240, // 4 hours max
        step: 15, // every 15 minutes
        value: 15,
        formatValue: function (value) {
          var hours = Math.floor(value / 60);
          var minutes = value - (hours * 60);
          var formatted = [];
          if (hours > 0) {
            formatted.push(hours + ' ' + (hours > 1 ? 'hours' : 'hour'));
          }
          if (minutes > 0) {
            formatted.push(minutes + ' minutes');
          }
          return formatted.join(' ');
        }
      })
    </script>
  </body>
</html>